<template>
  <div class="box">
    <van-nav-bar title="注册" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="logo_pic">
      <img src="https://m.juooo.com/static/img/login_logo.4a43235.png" alt="">
    </div>
    <van-form>
      <van-field
        v-model="username"
        name="tel"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, pattern: pattern1, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, pattern: pattern2, message: '请填写密码(不能少于6位)' }]"
      />
      <van-field
        v-model="truePassword"
        type="password"
        name="truePassword"
        label="确认密码"
        placeholder="请再次确认密码"
        :error-message="errorPassword"
        @blur="truePasswordBlur"
      />
      <van-field
        v-model="sms"
        center
        clearable
        name="sms"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :error-message="errorSms"
        @blur="smsValue"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 0.16rem;">
        <van-button round block type="info" native-type="submit" @click="Verification">
          去注册
        </van-button>
      </div>
    </van-form>
    <div class="login">
      <span @click="goChangePwd">忘记密码</span>
      <span @click="goLogin">密码登录</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, field, button, Toast } from 'vant'
import { register, sendCode } from '@/api'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(button)
Vue.use(field)
Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      password: '',
      truePassword: '',
      errorPassword: '',
      sms: '',
      errorSms: '',
      pattern1: /^1[3456789]\d{9}$/,
      pattern2: /^([a-zA-Z0-9]+[.~!@#$%-^&()]*){6,}/
    }
  },
  mounted () {},
  methods: {
    // 验证注册信息
    Verification () {
      // console.log(this.username, 1)
      // console.log(this.password, 2)
      // console.log(this.sms, 3)
      register({
        tel: this.username,
        password: this.password,
        usercode: this.sms
      }).then(res => {
        // console.log(res)
        if (res.data.code === '10666') {
          // alert(1)
          this.$router.push('/login')
        }
      })
    },
    sendCode () {
      // console.log(this.username)
      sendCode({
        tel: this.username
      }).then(res => {
        // console.log(res)
        Toast('发送成功,请5分钟内验证')
      })
    },
    truePasswordBlur () {
      if (this.truePassword !== this.password) {
        this.errorPassword = '密码不一致,请重新输入'
      } else {
        this.errorPassword = ''
      }
    },
    smsValue () {
      if (this.sms === '') {
        this.errorSms = '短信验证码不能为空'
      } else {
        this.errorSms = ''
      }
    },
    goLogin () {
      this.$router.replace('/login')
    },
    goChangePwd () {
      this.$router.replace('/changePwd')
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.logo_pic {
  width: 100%;
  height: 1.12rem;
  img {
    width: 1.6rem;
    height: 0.5rem;
    display: block;
    margin: 0.28rem auto 0.34rem auto;
  }
}
.login {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
  span:nth-of-type(1) {
    float: left;
  }
  span:nth-of-type(2) {
    float: right;
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.2rem;
  color: black;
}
/deep/ .van-button--info {
  background-image: linear-gradient(50deg, rgb(255, 154, 52), rgb(255, 77, 74));
  border: none;
}
</style>
